<template>
  <div>
    <div class="p-4 lg:p-6">
      <!-- 快速导航入口 -->
      <!-- <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <DashboardQuickLink title="首页管理" icon="home" color="bg-blue-500" @click="navigateTo('/admin/home')" />
        <DashboardQuickLink title="关于我们" icon="information-circle" color="bg-green-500"
          @click="navigateTo('/admin/about')" />
        <DashboardQuickLink title="用户管理" icon="users" color="bg-purple-500" @click="navigateTo('/admin/users')" />
        <DashboardQuickLink title="系统设置" icon="cog" color="bg-yellow-500" @click="navigateTo('/admin/settings')" />
      </div> -->
      <adminNavBar />
      <h1 class="text-2xl lg:text-3xl font-bold text-gray-800 mb-6">控制面板</h1>

      <!-- 数据概览卡片 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <LazyDashboardCard title="用户总数" :value="stats.totalUsers" icon="users" color="bg-blue-500" trend="up"
          change="12%" />
        <LazyDashboardCard title="今日访问" :value="stats.todayVisits" icon="eye" color="bg-green-500" trend="up"
          change="5%" />
        <LazyDashboardCard title="内容更新" :value="stats.contentUpdates" icon="document-text" color="bg-purple-500"
          trend="down" change="3%" />
        <LazyDashboardCard title="待办事项" :value="stats.pendingTasks" icon="check-circle" color="bg-yellow-500"
          trend="stable" />
      </div>

      <!-- 两栏布局 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 最近活动 -->
        <div class="bg-white rounded-lg shadow p-4 lg:p-6 lg:col-span-2">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-700">最近活动</h2>
            <button @click="refreshActivities" class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
              刷新
            </button>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">详情</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(item, index) in activities" :key="index">
                  <td class="px-4 py-3 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                        <span class="text-blue-600 text-sm font-medium">{{ item.user.charAt(0) }}</span>
                      </div>
                      <div>
                        <div class="text-sm font-medium text-gray-900">{{ item.user }}</div>
                        <div class="text-xs text-gray-500">{{ item.role }}</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                    <span
                      :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getActionClass(item.actionType)}`">
                      {{ item.action }}
                    </span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ item.time }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <button @click="showActivityDetail(item)" class="text-blue-600 hover:text-blue-900 text-sm">
                      查看详情
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="mt-4 flex justify-end">
            <button @click="viewAllActivities" class="text-sm text-gray-600 hover:text-gray-800">
              查看全部活动记录 →
            </button>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="space-y-6">
          <!-- 待办事项 -->
          <!-- <div class="bg-white rounded-lg shadow p-4 lg:p-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-xl font-semibold text-gray-700">待办事项</h2>
              <button @click="addNewTask" class="text-sm text-green-600 hover:text-green-800 flex items-center">
                添加
              </button>
            </div>
            <ul class="space-y-3">
              <li v-for="(task, index) in tasks" :key="index" class="flex items-start">
                <input v-model="task.completed" type="checkbox" :id="`task-${index}`"
                  class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
                <label :for="`task-${index}`"
                  :class="`ml-3 text-sm ${task.completed ? 'line-through text-gray-400' : 'text-gray-700'}`">
                  {{ task.title }}
                  <span v-if="task.dueDate" class="text-xs text-gray-500 ml-2">{{ task.dueDate }}</span>
                </label>
              </li>
            </ul>
          </div> -->

          <!-- 系统状态 -->
          <div class="bg-white rounded-lg shadow p-4 lg:p-6">
            <h2 class="text-xl font-semibold text-gray-700 mb-4">系统状态</h2>
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">服务器负载</span>
                <div class="w-1/2">
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div
                      :class="`h-full ${systemStatus.serverLoad > 70 ? 'bg-red-500' : systemStatus.serverLoad > 40 ? 'bg-yellow-500' : 'bg-green-500'}`"
                      :style="`width: ${systemStatus.serverLoad}%`"></div>
                  </div>
                  <span class="text-xs text-gray-500">{{ systemStatus.serverLoad }}%</span>
                </div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">存储空间</span>
                <div class="w-1/2">
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div
                      :class="`h-full ${systemStatus.storageUsed > 80 ? 'bg-red-500' : systemStatus.storageUsed > 60 ? 'bg-yellow-500' : 'bg-green-500'}`"
                      :style="`width: ${systemStatus.storageUsed}%`"></div>
                  </div>
                  <span class="text-xs text-gray-500">{{ systemStatus.storageUsed }}% 已用</span>
                </div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">内存使用</span>
                <div class="w-1/2">
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div
                      :class="`h-full ${systemStatus.memoryUsage > 80 ? 'bg-red-500' : systemStatus.memoryUsage > 60 ? 'bg-yellow-500' : 'bg-green-500'}`"
                      :style="`width: ${systemStatus.memoryUsage}%`"></div>
                  </div>
                  <span class="text-xs text-gray-500">{{ systemStatus.memoryUsage }}%</span>
                </div>
              </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-200">
              <div class="text-sm text-gray-600">最后更新: {{ systemStatus.lastUpdate }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 活动详情模态框 -->
    <LazyModal v-if="selectedActivity" @close="selectedActivity = null">
      <div class="p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-2">活动详情</h3>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700">用户</label>
            <p class="mt-1 text-sm text-gray-900">{{ selectedActivity.user }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">操作</label>
            <p class="mt-1 text-sm text-gray-900">{{ selectedActivity.action }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">时间</label>
            <p class="mt-1 text-sm text-gray-900">{{ selectedActivity.time }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">IP地址</label>
            <p class="mt-1 text-sm text-gray-900">{{ selectedActivity.ip || '未知' }}</p>
          </div>
          <div v-if="selectedActivity.details">
            <label class="block text-sm font-medium text-gray-700">详情</label>
            <p class="mt-1 text-sm text-gray-900">{{ selectedActivity.details }}</p>
          </div>
        </div>
        <div class="mt-6 flex justify-end">
          <button @click="selectedActivity = null"
            class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
            关闭
          </button>
        </div>
      </div>
    </LazyModal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import adminNavBar from '../../components/admin/admin-nav-bar.vue'

type ActionType = 'create' | 'update' | 'edit' | 'delete' | 'system'

interface Activity {
  user: string
  role: string
  action: string
  actionType: ActionType
  time: string
  ip?: string
  details?: string
}

interface Task {
  title: string
  completed: boolean
  dueDate?: string
}

interface SystemStatus {
  serverLoad: number
  storageUsed: number
  memoryUsage: number
  lastUpdate: string
}

const router = useRouter()

// 统计数据
const stats = reactive({
  totalUsers: 1248,
  todayVisits: 523,
  contentUpdates: 18,
  pendingTasks: 7
})

definePageMeta({
  layout: 'minimal',
  showHeader: false
});

// 最近活动
const activities = ref<Activity[]>([
  {
    user: '管理员',
    role: 'admin',
    action: '更新了首页内容',
    actionType: 'update',
    time: '10分钟前',
    ip: '192.168.1.100',
    details: '修改了首页的轮播图和公司简介部分'
  },
  // 其他活动...
])

// 待办事项
const tasks = ref<Task[]>([
  { title: '审核新用户注册', completed: false, dueDate: '今天' },
  // 其他任务...
])

// 系统状态
const systemStatus = reactive<SystemStatus>({
  serverLoad: 35,
  storageUsed: 65,
  memoryUsage: 42,
  lastUpdate: '刚刚'
})

// 选中的活动
const selectedActivity = ref<Activity | null>(null)

// 方法
const navigateTo = (path: string) => {
  router.push(path)
}

const refreshActivities = () => {
  // 模拟刷新数据
  console.log('刷新活动数据')
}

const viewAllActivities = () => {
  navigateTo('/admin/activities')
}

const showActivityDetail = (activity: Activity) => {
  selectedActivity.value = activity
}

const addNewTask = () => {
  tasks.value.unshift({
    title: '新任务',
    completed: false
  })
}

const getActionClass = (actionType: ActionType) => {
  const classes: Record<ActionType, string> = {
    'create': 'bg-green-100 text-green-800',
    'update': 'bg-blue-100 text-blue-800',
    'edit': 'bg-blue-100 text-blue-800',
    'delete': 'bg-red-100 text-red-800',
    'system': 'bg-gray-100 text-gray-800'
  }
  return classes[actionType]
}

// 模拟实时更新
onMounted(() => {
  setInterval(() => {
    systemStatus.lastUpdate = new Date().toLocaleTimeString()
    systemStatus.serverLoad = Math.min(100, Math.max(0, systemStatus.serverLoad + (Math.random() * 10 - 5)))
    systemStatus.memoryUsage = Math.min(100, Math.max(0, systemStatus.memoryUsage + (Math.random() * 6 - 3)))
  }, 5000)
})
</script>
<style scoped>
@keyframes ping-slow {
  0% {
    transform: scale(0.8);
    opacity: 0.4;
  }

  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-ping-slow {
  animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-spin-slow {
  animation: spin-slow linear infinite;
}
</style>